<template>
	<view class="page-index">
		<view class="bar-area">
			<view
				class="fc-white fs30"
				@click="loginOut"
				:style="showQuitBtn ? '' : 'visibility: hidden;'"
				>退出</view
			>
			<view class="flex-row" @click="areaChange">
				<view class="fc-white fs35">血袋上交</view>
			</view>
			<view class="fc-white fs30">{{ loginUser && loginUser.YHXM }}</view>
		</view>
        
        <view class="scan-tips-warning">
			请扫描血袋码
		</view>

		<!-- <view
			style="display: flex; position: absolute; top: 0rpx; left: 100rpx"
		>
			<view>
				<view @click="scanTest(testId)">血袋号扫描测试</view>
			</view>
			<view>
				<input
					type="text"
					v-model="testId"
					placeholder="请输入血袋码"
				/>
			</view>
			<view>
				<view @click="confirmVisible = true">血袋签收</view>
			</view>
		</view> -->

		<!--  v-if="step != 0" -->
		<view class="main-context">
			<!-- <u-tabs :list="tabList" :is-scroll="false" :current="currentTab" @change="tabChange"></u-tabs> -->
			<scroll-view
				class="scroll-view"
				scroll-y="auto"
				:refresher-enabled="false"
				@refresherrefresh="onPullRefresh"
				@scrolltolower="onReachBottomDistance"
				:refresher-triggered="isRefresherTriggered"
			>
				<view>
                    <view v-for="(item,index) in listData" :key="index">
						<view class="item-area">
							<view class="blood-bag-title">
								<view class="blood-bag-title-text">血袋号：{{item.barCode}}</view>
							</view>
							<view class="blood-bag-content">
								<view class="blood-bag-content-main">
									<view class="blood-bag-content-main-text">
										{{item.bloodName}}
									</view>
									<view class="blood-bag-content-main-amount">
										{{item.volume}}ml
									</view>
								</view>
							</view>
							<view class="blood-bag-exper">
								<view class="blood-bag-exper-text">
									<div class="blood-bag-exper-text-bedNum">{{item.brch}}</div>
                                    <div class="blood-bag-exper-text-name">{{item.brxm}}</div>
                                    <view class="item-check-status">
                                        <view class="item-check-yes">
                                            <view class="item-check-status-text">{{getBloodBagStatus(item.xdzt)}}</view>
                                        </view>
                                    </view>
								</view>
							</view>
						</view>
					</view>
                    <u-empty :show="!(listData && listData.length > 0)" marginTop="300" ></u-empty>
                </view>
			</scroll-view>
		</view>
		<u-modal :show="confirmVisible" 
            showCancelButton 
            title="提醒" 
            @confirm="handleConfirm" 
            @cancel="handleCancel">
            <view class="slot-content">
				<div class="confirm-content">
                    <div class="confirm-content-icon">
                        <u--image width="16" height="16"
                            src="/static/warning.svg"></u--image>
                    </div>
                    <div class="confirm-content-text">确认上交血袋：{{nowScanBloodBag&&nowScanBloodBag.barCode}}？</div>
                </div>
			</view>
        </u-modal>
	</view>
</template>

<script>
import { mapState } from "vuex"
import { logout } from "@/api/utils.js"
import {
	getDateTimeString,
	getInspectType,
	getTimestamp,
	getBloodBagStatus,
	showToast,
} from "@/static/js/common.js"
import "@/static/css/common.scss"

export default {
	components: {},
	props: {
		showQuitBtn: {
			type: Boolean,
			default: function () {
				return true
			},
		},
	},
	data() {
		return {
			step: 0, // 0:初始化空白状态  1:已扫描腕带  2:已扫描输液贴
            confirmVisible:false,//确认框
            testId:'',//测试血袋码

			isRefresherTriggered: false,

			nowScanBloodBag:null,//当前扫描的血袋 对象

			listData: [], // 医嘱计划处理后的数据

			allowJump:true,//是否允许跳流程执行
			
		}
	},
	watch: {},
	computed: {
		...mapState(["loginUser", "area", "skinTestPatientList"]),
		actions() {
			if (this.area && this.area.length > 0) {
				let list = this.area.map((item) => {
					return {
						name: item.ksmc,
						code: item.ksdm,
					}
				})
				return list
			} else {
				return []
			}
		},
	},
	beforeDestroy() {
		uni.$off("scanCodeEmit") //取消监听
		clearInterval(this.skinTestInterval) //销毁皮试定时器
	},
	mounted() {
		// 接收原生扫描传值     监听扫描事件
		uni.$on("scanCodeEmit", async (res) => {
			console.log("血袋上交扫描内容：", res)

			let result = await this.getBloodBagDetail(res);
			console.log('血袋详情：',result);
			if(result.res.ReType == 0){
				this.step = 1 //已扫描血袋
				if(result.res.Data.length > 0){
					let scanBloodBag = result.res.Data[0];
					if(Number(scanBloodBag.xdzt) >= '7'){//已上交
						showToast(-1,'血袋已上交');
						return;
					}
					if(this.listData.find(el=>el.barCode == scanBloodBag.barCode) == null){//页面列表中不存在
						this.nowScanBloodBag = scanBloodBag;
						if(Number(this.nowScanBloodBag.xdzt) < 6){
							if(this.allowJump){
								this.handleOpenModal();//打开确认弹窗
							}else{
								showToast(-1,'血袋不可上交');
								return;
							}
						}else{
							this.handleOpenModal();//打开确认弹窗
						}
					}else{
						showToast(-1,'血袋已扫描') //消息提示
						return;
					}
				}else{
					showToast(-1,'未找到血袋信息') //消息提示
					return;
				}
			}else{
				showToast(-1,'未找到血袋信息') //消息提示
				return;
			}
		})

		console.log("当前登陆人信息：", this.loginUser)
	},
	methods: {
		/**
		 * 扫描测试
		 * type 1 腕带   2 血袋
		 */
		async scanTest(res, type) {
			let result = await this.getBloodBagDetail(res);
			console.log('血袋详情：',result);
			if(result.res.ReType == 0){
				this.step = 1 //已扫描血袋
				if(result.res.Data.length > 0){
					let scanBloodBag = result.res.Data[0];
					if(Number(scanBloodBag.xdzt) >= '7'){//已上交
						showToast(-1,'血袋已上交');
						return;
					}
					if(this.listData.find(el=>el.barCode == scanBloodBag.barCode) == null){//页面列表中不存在
						this.nowScanBloodBag = scanBloodBag;
						if(Number(this.nowScanBloodBag.xdzt) < 6){
							if(this.allowJump){
								this.handleOpenModal();//打开确认弹窗
							}else{
								showToast(-1,'血袋不可上交');
								return;
							}
						}else{
							this.handleOpenModal();//打开确认弹窗
						}
					}else{
						showToast(-1,'血袋已扫描') //消息提示
						return;
					}
				}else{
					showToast(-1,'未找到血袋信息') //消息提示
					return;
				}
			}else{
				showToast(-1,'未找到血袋信息') //消息提示
				return;
			}
		},

		//打开确认弹窗
		handleOpenModal(){
			this.confirmVisible = true;
		},

		/**
		 * 获取血袋详情
		 * bloodBagBarCode 血袋号
		 */
		getBloodBagDetail(bloodBagBarCode){
			let date = new Date();
			let params = {
				barCode: bloodBagBarCode,
				// visitId: "string",
			}
			return this.$commonAjax(
				"/auth/mobile/advice/BloodTranSfusion/ScanBloodBag",
				params
			)
		},

		//获取血袋状态
		getBloodBagStatus(status){
			return getBloodBagStatus(status);
		},

		//确认上交
		async handleConfirm(){
			let result = await this.handleHandin();
			if(result.res.ReType == 0){
				showToast(result.res.ReType,result.res.Msg) //消息提示
				this.nowScanBloodBag.xdzt = '7';//设置为上交
				this.listData.push(this.nowScanBloodBag);
				this.nowScanBloodBag = null;//扫描血袋置空
				
				this.confirmVisible = false;
			}else{
				showToast(result.res.ReType,result.res.Msg) //消息提示
			}
            
        },
		//取消按钮
        handleCancel(){
            this.confirmVisible = false;
        },

		//血袋上交
		handleHandin(){
			let date = new Date()
			let params = {
				barBagList: [this.nowScanBloodBag.barCode],
				dtXdsj: getDateTimeString(new Date()),
				sdsjID: this.loginUser.YHID,
				sdsjName: this.loginUser.YHXM,
				// dtSignWard: {},
				// signId: "string",
				// signName: "string",
				xdzt: "7",
			}
			return this.$commonAjax(
				"auth/mobile/advice/BloodTranSfusion/HandBloodBag",
				params
			)
		},

		loginOut() {
			logout()
		},
		onPullRefresh() {
			if (this.isRefresherTriggered) {
				return
			}
			this.isRefresherTriggered = true
			this.getInspectList()
		},
		onReachBottomDistance() {
			console.log(1111)
		},
	},
}
</script>

<style lang="scss">
.main-context {
	position: relative;
	height: calc(100% - 200rpx);
}
.scan-tips-warning {
	text-align: center;
	background-color: #faefe4;
	font-size: 30rpx;
	color: #ff9a27;
	padding: 10rpx 0rpx;
}
.scan-tips-primary {
	text-align: center;
	background-color: #4089fe1f;
	font-size: 30rpx;
	color: #4088fe;
	padding: 10rpx 0rpx;
}
.bar-area {
	height: 100rpx;
	background-color: $bs-color-primary;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 30rpx;
	justify-content: space-between;
	padding: 0 30rpx;
}
.scroll-view {
	width: 100%;
	height: calc(100% - 20rpx);
	background-color: #f3f5f7;
	padding-bottom: 20rpx;
}
.patient-info {
	padding: 20rpx;
    margin: 20rpx;
	position: relative;
    background-color: #FFFFFF;

	.filter-button {
		font-size: 28rpx;
		color: #4088fe;
		background-color: #ebf3fe;
		border: 2rpx solid #4088fe;
		border-radius: 6rpx;
		width: 100rpx;
		text-align: center;
		padding: 10rpx 10rpx;
		position: absolute;
		right: 20rpx;
		top: 14rpx;
		z-index: 100;
	}
}
.item-area {
	position: relative;
	margin: 20rpx 20rpx 0 20rpx;
	background-color: #ffff;
	border-radius: 10rpx;
	padding: 10rpx;
	.blood-bag-title {
		background-image: url("~@/static/danger_strip.svg");
		background-repeat: no-repeat;
		background-size: 140%;
		padding: 6rpx 10rpx;
		display: flex;
	}
	.blood-bag-title-text {
		color: #ffffff;
	}
	.blood-bag-title-losedate {
		font-size:22rpx;
		color: #909399;
		margin-left: auto;
	}
	.blood-bag-content {
        padding: 10rpx;
        display: flex;
        font-size: 26rpx;
        align-items: center;
	}
	.blood-bag-content-main {
        display: flex;
        align-items: center;
        .blood-bag-content-main-text{

        }
        .blood-bag-content-main-amount{
            margin-left: 20rpx;
        }
	}
	.blood-bag-exper{
		color: #909399;
		font-size: 26rpx;
		margin: 0rpx 10rpx;
		line-height: 40rpx;
		.blood-bag-exper-text{
            display: flex;
            align-items: center;
            .blood-bag-exper-text-bedNum{
                margin-right: 20rpx;
            }
            .blood-bag-exper-text-name{

            }
		}
	}

}
.item-title {
	padding: 6rpx 10rpx 12rpx 10rpx;
	display: flex;
}
.item-line {
	width: 1rpx;
	background-color: #d6d7d9;
	height: 46rpx;
	width: 2rpx;
}

.item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20rpx;
}
.item-body-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10rpx;
}
.item-check-status {
	font-size: 27rpx;
	margin-left: auto;
	display: flex;
	align-items: center;
	color: #ffffff;
	.item-check-no {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-image: url("~@/static/warning_rect.svg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.item-check-yes {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-image: url("~@/static/success_rect.svg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.item-check-status-text {
		// position: relative;
		// bottom: 4rpx;
		// right: 4rpx;
	}
}

.item-brch {
	width: 98rpx;
	font-size: 30rpx;
	color: #e06263;
	font-weight: bold;
}
.item-info {
	display: flex;
}

.item-content {
	font-size: 28rpx;
	display: flex;
	position: relative;
	.item-content-icon {
		font-size: 25rpx;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		background-color: #fff5ea;
		color: #ff9a27;
		// width: 28rpx;
		height: 37rpx;
		margin-right: 10rpx;
	}
	.item-content-list {
		padding: 20rpx 8rpx 0rpx 8rpx;
        border-top: 1px solid #EBEEF5;
        width: 100%;
		.list-item {
			display: flex;
			margin-bottom: 6rpx;
            align-items: center;
			.item-name {
				color: #262626;
			}
			.item-amount {
                margin-left: auto;
				color: #262626;
			}
		}
	}
	.item-usage {
		background-color: #f0f3f6;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
		height: 35rpx;
		font-size: 25rpx;
		position: absolute;
		bottom: 15rpx;
		right: 10rpx;
	}
	.item-check-yes {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-color: #26bf4017;
		margin-bottom: 10rpx;
		margin-left: auto;
	}
}
.check-datetime {
	font-size: 25rpx;
	color: #909399;
	padding: 0rpx 12rpx 8rpx 12rpx;
}
.item-bottom {
	display: flex;
	align-items: center;
	.plan-datetime {
		font-size: 25rpx;
		color: #909399;
		padding: 0rpx 12rpx 8rpx 12rpx;
	}
}

.patientInfo-zd {
	width: calc(100% - 100rpx);
	font-size: 25rpx;
	color: #909399;
	padding: 0rpx 12rpx 8rpx 12rpx;
	position: relative;
	left: 116rpx;
}
.blood-bag-check {
	height: 500rpx;
	position: relative;
	padding: 20rpx;
	.blood-bag-check-title {
		font-size: 34rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.blood-bag-check-main {
		font-size: 34rpx;
		.blood-bag-check-checked {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.blood-bag-check-checking {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			.blood-bag-check-checking-main {
				display: flex;
				align-items: center;
			}
		}
	}
	.submit-button {
		display: flex;
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		button {
			color: #262626;
			background-color: #ffffff;
			margin: 5rpx;
		}
		.primary-button {
			color: #ffffff;
			background-color: #4088fe;
		}
	}
}

.confirm-content{
    display: flex;
    align-items: center;
    .confirm-content-icon{
        margin-right: 20rpx;
    }
    .confirm-content-text{
        font-size: 32rpx;
    }
}

</style>
